<template>
  <div>
    <!-- 
      对象的更新监测，是如何？
      总结：vue监测不到后期向对象中添加的属性的

      需求：对象中一开始就是不需要name属性的，后期才需要添加进去的，如何能够让vue监测到呢？
      答：可以使用this.$set方法解决
      (面试常见问题，实际开发中也是比较常见的)
     -->
    <h1>{{ obj.age }}</h1>
    <button @click="changeAgeFn">修改age的值-- 页面更新 --- 能实现</button>
    <h1>显示用户名：{{ obj.name }}</h1>
    <button @click="addNameFn">
      给obj添加name属性-- 页面更新 -- 需要通过$set实现
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        age: 12,
      },
    };
  },
  methods: {
    changeAgeFn() {
      this.obj.age = 18;
    },
    addNameFn() {
      // this.obj.name = "小明";
      this.$set(this.obj, "name", "小明");
    },
  },
};
</script>

<style>
</style>